import React, { memo ,useEffect} from 'react'
import { shallowEqual, useDispatch, useSelector } from 'react-redux'
import {
  getHotRecommendDataAction
} from '../../store/actionCreator'
import {
  HotRecommendWrapper
} from './style'
import Cover from '@/components/cover'
export default memo(function HotRecommend() {
  const dispatch = useDispatch()
  useEffect(() => {
    dispatch(getHotRecommendDataAction())
  },[dispatch])

  const { hotRecommendList } = useSelector(state => ({
    hotRecommendList:state.getIn(['recommend','hotRecommendList'])
  }), shallowEqual)
  return (
    <HotRecommendWrapper>
      {
        hotRecommendList.slice(0,8).map(item => {
          return (
            <Cover key={item.id} info={item}/>
          )
        })
      }
    </HotRecommendWrapper>
  )
})
